<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="40%"
    top="5vh"
  >
    <div style="margin-bottom: 20px">
      <el-row>
        <el-col :span="16">
          <el-card class="cus-card">
            <el-row class="cus-el-row">
              <el-col :span="8">
                {{ $t('BookStore2[\'' + form.brand + '\']') }}
              </el-col>
              <el-col :span="8">
                {{ form.vin }}
              </el-col>
              <el-col :span="8">
                <el-tag :type="form.tireType === 'Enum:VehicleTireType.FourSeasons' ? 'success' : ''">
                  {{ $t('BookStore2[\'' + form.tireType + '\']') }}
                  <svg-icon :icon-class="form.tireType === 'Enum:VehicleTireType.FourSeasons' ? '' : 'snowflake'" />
                </el-tag>
              </el-col>
            </el-row>
            <el-row class="cus-el-row">
              <el-col :span="8">
                <span v-if="form.vehicleYear">
                  {{ form.vehicleYear | dateYFormat }}
                </span>
                <span v-else>-</span>
              </el-col>
              <el-col :span="8">
                {{ (form.totalKilometers || 0) + ' KM' }}
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-image
            class="cus-image"
            :src="attachFile1"
            fit="fill"
          />
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col :span="16">
          <el-image
            style="height: 150px;width: 100%;"
            :src="numberPlates"
          />
        </el-col>
        <el-col :span="7" :offset="1">
          <el-image
            class="cus-image"
            :src="attachFile2"
            fit="fill"
          />
        </el-col>
      </el-row>
    </div>
    <el-divider />
    <div class="cus-record">
      <el-row type="flex" style="margin-bottom: 20px;" class="row-bg" justify="center">
        <el-col :span="5"><el-button v-if="checkPermission('BookStore2VehicleMaintenanceRecord')" type="primary" @click="openRecords('openVehicleMaintenanceRecord')">{{ $t('BookStore2[\'VehicleMaintenanceRecord\']') }}</el-button></el-col>
        <el-col :span="5"><el-button v-if="checkPermission('BookStore2VehicleInspectionRecord')" type="primary" @click="openRecords('openVehicleInspectionRecord')">{{ $t('BookStore2[\'VehicleInspectionRecord\']') }}</el-button></el-col>
        <el-col :span="5"><el-button v-if="checkPermission('BookStore2VehicleRepairRecord')" type="primary" @click="openRecords('openVehicleRepairRecord')">{{ $t('BookStore2[\'VehicleRepairRecord\']') }}</el-button></el-col>
        <el-col :span="5"><el-button v-if="checkPermission('BookStore2VehicleDriveRecord')" type="primary" @click="openRecords('openVehicleDriveRecord')">{{ $t('BookStore2[\'VehicleDriveRecord\']') }}</el-button></el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="latesInspectionRecord"
        style="width: 100%"
      >
        <el-table-column prop="creationTime" :label="$t('BookStore2[\'LastInspection\']')">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateYMDFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('BookStore2[\'Display:Cleanliness\']')" prop="cleanliness">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'' + scope.row.cleanliness + '\']') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('BookStore2[\'Display:TirePressure\']')" prop="tirePressure">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'' + scope.row.tirePressure + '\']') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('BookStore2[\'Display:RemainFuel\']')" prop="remainFuel">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'' + scope.row.remainFuel + '\']') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('BookStore2[\'Display:EngineLight\']')" prop="engineLight">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'' + scope.row.engineLight + '\']') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('BookStore2[\'Display:WindshieldFluid\']')" prop="windshieldFluid">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'' + scope.row.windshieldFluid + '\']') }}
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="latestDriverRecord"
        style="width: 100%"
      >
        <el-table-column prop="creationTime" :label="$t('BookStore2[\'LastDriving\']')">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateYMDFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="driverName" :label="$t('BookStore2[\'Display:Driver\']')" />
        <el-table-column />
      </el-table>
      <el-table
        :data="latestMaintenanceRecord"
        style="width: 100%"
      >
        <el-table-column prop="creationTime" :label="$t('BookStore2[\'LastMaintenance\']')">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateYMDFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="detail" :label="$t('BookStore2[\'Display:Detail\']')" />
        <el-table-column prop="location" :label="$t('BookStore2[\'Display:Location\']')" />
      </el-table>
      <el-table
        :data="latestRepairRecord"
        style="width: 100%"
      >
        <el-table-column prop="creationTime" :label="$t('BookStore2[\'LastRepair\']')">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateYMDFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="detail" :label="$t('BookStore2[\'Display:Detail\']')" />
        <el-table-column prop="location" :label="$t('BookStore2[\'Display:Location\']')" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { getById } from '@/api/vehicle/vehicle'
import { getDataDict } from '@/api/data-dict/data-dict'
import { checkPermission } from '@/utils/abp'
export default {
  name: 'VehicleDetail',
  props: {
    context: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      title: '',
      loading: false,
      dataDict: {},
      form: {
        id: '',
        number: '',
        vin: '',
        licensePlateNumber: '',
        brand: '',
        tireType: 'Enum:VehicleTireType.FourSeasons',
        partner: '',
        vehicleType: '',
        vehicleYear: null,
        purchasingDate: null,
        isMaintaining: false,
        costAmount: 0,
        cost: '',
        remark: '',
        concurrencyStamp: '',
        attachFiles: [],
        totalKilometers: 0
      },
      attachFile1: '',
      attachFile2: '',
      brand: '',
      numberPlates: '',
      latestDriverRecord: [],
      latestMaintenanceRecord: [],
      latesInspectionRecord: [],
      latestRepairRecord: []
    }
  },
  watch: {
    context(newVal, oldVal) {
      this.loading = true
      this.title = newVal.title
      this.$nextTick(function() {
        if (newVal.id) {
          getById(newVal.id).then(resp => {
            const vehicle = resp
            if (vehicle) {
              this.form.id = vehicle.id
              this.form.number = vehicle.number
              this.form.vin = vehicle.vin
              this.form.licensePlateNumber = vehicle.licensePlateNumber
              this.form.brand = vehicle.brand
              this.form.tireType = vehicle.tireType
              this.form.vehicleType = vehicle.vehicleType
              this.form.partner = vehicle.partner
              this.form.vehicleYear = vehicle.vehicleYear
              this.form.purchasingDate = vehicle.purchasingDate
              this.form.cost = vehicle.cost
              this.form.costAmount = vehicle.costAmount
              this.form.remark = vehicle.remark
              this.form.attachFiles = vehicle.attachFiles
              this.form.concurrencyStamp = vehicle.concurrencyStamp
              this.form.totalKilometers = vehicle.totalKilometers

              this.latestDriverRecord = []
              if (vehicle.latestDriverRecord) {
                this.latestDriverRecord.push(vehicle.latestDriverRecord)
              }
              this.latestMaintenanceRecord = []
              if (vehicle.latestMaintenanceRecord) {
                this.latestMaintenanceRecord.push(vehicle.latestMaintenanceRecord)
              }
              this.latesInspectionRecord = []
              if (vehicle.latesInspectionRecord) {
                this.latesInspectionRecord.push(vehicle.latesInspectionRecord)
              }
              this.latestRepairRecord = []
              if (vehicle.latestRepairRecord) {
                this.latestRepairRecord.push(vehicle.latestRepairRecord)
              }

              this.attachFile1 = require('../../../assets/default_car.png')
              this.attachFile2 = require('../../../assets/default_car.png')
              if (vehicle.attachFiles && vehicle.attachFiles.length >= 1) {
                this.attachFile1 = process.env.VUE_APP_BLOB_RESOURCE + vehicle.attachFiles[0].blobName
              }
              if (vehicle.attachFiles && vehicle.attachFiles.length >= 2) {
                this.attachFile2 = process.env.VUE_APP_BLOB_RESOURCE + vehicle.attachFiles[1].blobName
              }

              if (vehicle.numberPlates) {
                this.numberPlates = process.env.VUE_APP_BLOB_RESOURCE + vehicle.numberPlates.blobName
              }
              this.brand = newVal.brand
            }
            this.loading = false
          })
        }
      })
    }
  },
  async created() {
    this.dataDict = await getDataDict(['VehicleBrand', 'VehicleTireType'])
  },
  methods: {
    checkPermission,
    openRecords(action, id) {
      switch (action) {
        case 'openVehicleInspectionRecord':
          this.$router.push({ name: 'VehicleInspection', params: { vehicleId: this.context.id }})
          break
        case 'openVehicleDriveRecord':
          this.$router.push({ name: 'VehicleDrive', params: { vehicleId: this.context.id }})
          break
        case 'openVehicleMaintenanceRecord':
          this.$router.push({ name: 'VehicleMaintenance', params: { vehicleId: this.context.id }})
          break
        case 'openVehicleRepairRecord':
          this.$router.push({ name: 'VehicleRepair', params: { vehicleId: this.context.id }})
          break
      }
    },
    closeDialog() {
      this.resetDialog() // 重置表单
      this.$emit('update:visible', false)
    },
    resetDialog() {
      // console.log(this.form)
    }
  }
}
</script>

<style scoped>
.cus-card {
  height: 150px;
  border-radius: 5px;
}
.cus-card .cus-el-row {
  margin-bottom: 10px;
  line-height: 30px;
}
.cus-image {
  height: 150px;
  width:150px;
  border-radius: 5px;
}
.cus-record {
  /*margin-top: 50px;*/
}
</style>
